<template>
    <view>
        <block v-if="info">
            <!-- <view class="container">
            <view class="flex item align-center">
                <view class="title"> 状态 </view>
                <view class="flex-1 text-right"> 16546546464 </view>
            </view> 
        </view> -->
            <view class="container font-color-9b">
                <view class="flex item align-center">
                    <view class="title"> 状态 </view>
                    <view class="flex-1 text-right">
                        <view class="status-yellow" v-if="info.audit_status == 1" ><text>待审核</text> </view>
                        <view  class="status-success" v-if="info.audit_status == 2"><text>已受理</text> </view>
                        <view class="status-fail" v-if="info.audit_status == 0"><text >已被驳回</text> </view>
                        <view class="status-success" v-if="info.audit_status == 3"><text >已完成</text> </view>
                    </view>
                </view>
                <view class="flex item align-center">
                    <view class="title"> 儿童姓名 </view>
                    <view class="flex-1 text-right">
                        {{ info.child_usernme }}
                    </view>
                </view>
                <view class="flex item align-center">
                    <view class="title"> 性别 </view>
                    <view class="flex-1 text-right"> {{ info.sex_name }} </view>
                </view>
                <view class="flex item align-center">
                    <view class="title"> 出身日期 </view>
                    <view class="flex-1 text-right"> {{ transformTime(info.birthday) }} </view>
                </view>
                <view class="flex item align-center">
                    <view class="title"> 家庭住址 </view>
                    <view class="flex-1 text-right">
                        {{ info.home_address }}
                    </view>
                </view>
                <view class="flex item align-center">
                    <view class="title"> 身份证号 </view>
                    <view class="flex-1 text-right"> {{ info.card_num }} </view>
                </view>
                <view class="flex item align-center">
                    <view class="title"> 学校 </view>
                    <view class="flex-1 text-right"> {{ info.school }} </view>
                </view>
                <view class="flex item align-center">
                    <view class="title"> 身体状况 </view>
                    <view class="flex-1 text-right"> {{ info.health }} </view>
                </view>
            </view>
            <clearLine :height="15" bacColor="#F4F5FA"></clearLine>
			<block v-if="info.guardianship.length">
				<view class="container font-color-9b" v-for="(item,index) in info.guardianship" :key="index">
					<view class="flex item align-center" v-if="item.name">
						<view class="title">监护人{{index+1}}名称</view>
						<view class="flex-1 text-right"> {{ item.name }} </view>
					</view>
					<view class="flex item align-center" v-if="item.relase">
						<view class="title">监护人{{index+1}}关系</view>
						<view class="flex-1 text-right"> {{ item.relase }} </view>
					</view>
					<view class="flex item align-center" v-if="item.mobile">
						<view class="title">联系方式</view>
						<view class="flex-1 text-right"> {{ item.mobile }} </view>
					</view>
					<view class="flex item align-center" v-if="item.job">
					    <view class="title"> 职业 </view>
					    <view class="flex-1 text-right"> {{ item.job }} </view>
					</view>
					<view class="flex item align-center" v-if="item.address">
					    <view class="title"> 现居地址 </view>
					    <view class="flex-1 text-right"> {{ item.address }} </view>
					</view>
				    <!-- <view class="mar-t-10 font-size-17 font-color-333">
				        监护人：
				    </view>
				    <view class="flex item align-center" v-if="info.guardian_name">
				        <view class="title"> 姓名 </view>
				        <view class="flex-1 text-right"> {{ info.guardian_name }} </view>
				    </view>
				    <view class="flex item align-center" v-if="info.guardian_mobile">
				        <view class="title"> 联系方式 </view>
				        <view class="flex-1 text-right"> {{ info.guardian_mobile }} </view>
				    </view>
					<view class="flex item align-center" v-if="info.job">
					    <view class="title"> 职业 </view>
					    <view class="flex-1 text-right"> {{ info.job }} </view>
					</view>
					<view class="flex item align-center" v-if="info.address">
					    <view class="title"> 现居地址 </view>
					    <view class="flex-1 text-right"> {{ info.address }} </view>
					</view> -->
				</view>
			</block>
            
            <clearLine :height="15" bacColor="#F4F5FA"></clearLine>
            <!-- <view class="container font-color-9b pad-b-10">
                <view class="mar-t-10 font-size-17 font-color-333">
                    家庭情况：
                </view>
                <view class="mar-t-15">{{ info.family_info }} </view>
            </view> -->
            <clearLine :height="15" bacColor="#F4F5FA"></clearLine>
            <view class="container font-color-9b">
                <view class="mar-t-10 font-size-17 font-color-333">
                    申请理由：
                </view>
                <view class="pad-t-15 pad-b-15">{{ info.remark }}</view>
            </view>
            <!-- <clearLine :height="15" bacColor="#F4F5FA"></clearLine> -->
            <navigator v-if="info.audit_status == 0" :url="'/pages/social/home_apply?id='+info.id" open-type="redirect"  class="edit-btn mar-t-15">
                <text>编辑</text>
            </navigator>
            <view style="height: 60px"></view>
        </block>
        <no-data v-else></no-data>
    </view>
</template>

<script>
import { homeApplyDetail } from "@/utils/http";
export default {
    data() {
        return {
            id: "",
            info: "",
        };
    },
    methods: {
        homeApplyDetail() {
            homeApplyDetail({ id: this.id }).then((res) => {
                if (res) {
                    this.info = res;
                }
            });
        },
    },
    onLoad(options) {
        this.id = options.id;
        this.homeApplyDetail();
    },
};
</script>

<style scoped>
page{
    background-color: #fff;
}
.item .title {
    width: 90px;
    text-align: justify;
    text-align-last: justify;
}
.item {
    padding-top: 13px;
    padding-bottom: 13px;
}
.edit-btn{
    background-color: #0092FF;
    color: #fff;
    height: 40px;
    line-height: 40px;
    width: 220px;
    margin:0 auto;
    text-align: center;
    border-radius: 8px;
}
</style>